<template>
  <div class="my-apply">
    <el-row :gutter="20">
      <el-form :model="form"
               size="medium">
        <el-col :span="24"
                class="condition-style-box">
          <el-col :span="12">
            <el-form-item label="应用名称"
                          label-width="75px">
              <el-input v-model="form.system_name"
                        placeholder="请输入应用名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单编号"
                          label-width="75px">
              <div class="condition-style">
                <el-input v-model="form.comp_pro_apply_no"
                          placeholder="请输入订单编号"></el-input>
                <el-button type="primary"
                           @click="onSearch">查询</el-button>
                <el-button @click="onReset"
                           class="reset-style">重置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-table :data="tableData"
                    height="528px"
                    :header-cell-style="{background:'#f5f5f5'}">
            <el-table-column width="60"
                             label="序号"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column prop="comp_pro_apply_no"
                             label="订单编号"
                             align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="system_name"
                             label="应用名称"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="project_name"
                             label="授权的项目"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="company_name"
                             label="授权的单位"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="create_time"
                             label="申请时间"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="订单状态"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <span :class="scope.row.status==2?'test-style':scope.row.status==3?'pass-style':''">{{getStatusName(scope.row)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="form.page"
                         :page-sizes="[10,20,30,50,100]"
                         :page-size="form.page_size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { MyApplyApi } from '@/services/PersonalCenter'
import { standardCodeApi } from "@/services/StandardCode";
export default {
  data () {
    return {
      statusArr: [],//状态标准码
      tableData: [],
      total: 0,
      form: {
        status: '',
        system_name: '',
        comp_pro_apply_no: '',//订单编号
        page: 1,
        page_size: 10,
        is_page: 1
      }
    }
  },
  methods: {
    // 状态标准码
    getStatusStandard () {
      return standardCodeApi.getConsoleStandardCode({
        params: {
          code_type: 'compSysStatus',
          is_page: 0
        }
      }).then((res) => {
        if (res.code == 0) {
          //部件采购->项目状态下拉数据
          this.statusArr = [];
          this.statusArr = res.data.list;
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    //获取状态名称
    getStatusName (row) {
      //状态审核状态，标准码：compSysStatus，2：审核中，3：通过，4：驳回
      let statusName = ''
      if (row.status == 2) {
        statusName = '待处理'
      } else if (row.status == 3) {
        statusName = '已授权'
      } else if (row.status == 4) {
        statusName = '已驳回'
      };
      return statusName;
    },
    getAuthlist () {//申请列表
      return MyApplyApi.getAuthlist({
        params: this.form
      }).then((res) => {
        if (res.data) {
          this.tableData = res.data.list;
          this.total = res.data.total_count;
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    onReset () {//重置
      this.form = this.$options.data().form;//重置
      this.onSearch();//查询
    },
    handleSizeChange (val) {
      this.form.page_size = val;
      this.handleCurrentChange(1);//刷新
    },
    handleCurrentChange (val) {
      this.form.page = val;
      this.getAuthlist();//获取申请列表
    },
    onSearch () {//查询
      this.handleCurrentChange(1);//刷新
    },
  },
  async created () {
    await this.getStatusStandard();//状态标准友
    await this.handleCurrentChange(1);//刷新
  }
}
</script>
<style lang="scss" scoped>
.my-apply {
  padding: 20px;
  .condition-style-box {
    padding: 0px !important;
    .condition-style {
      display: flex;
      flex-direction: row;
    }
  }
  .test-style {
    color: red;
  }
  .pass-style {
    color: green;
  }
}
.bottom-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 20px;
}
.sel-style {
  width: 100% !important;
}
.reset-style {
  margin-left: 20px;
}
</style>